<template>
	<view class="content">
		<view class="c2c">
			<view class="block" @click="$goPage('../c2cCard/c2cCard?type=1')">
				<view class="left">
					<image class="one" src="../../../static/c2c/yhk.png" mode=""></image>
					<text>银行卡</text>
				</view>
				<view class="right">
					<text>未设置</text>
					<uni-icons class="icons" type="arrowright" :color="'#C5CFD5'" size="24"></uni-icons>
				</view>
			</view>
			<view class="block" @click="$goPage('../c2cCard/c2cCard?type=2')">
				<view class="left">
					<image class="one" src="../../../static/c2c/zfb.png" mode=""></image>
					<text>支付宝</text>
				</view>
				<view class="right">
					<text>未设置</text>
					<uni-icons class="icons" type="arrowright" :color="'#C5CFD5'" size="24"></uni-icons>
				</view>
			</view>
			<view class="block" @click="$goPage('../c2cCard/c2cCard?type=3')">
				<view class="left">
					<image class="one" src="../../../static/c2c/wx.png" mode=""></image>
					<text>微信</text>
				</view>
				<view class="right">
					<text>未设置</text>
					<uni-icons class="icons" type="arrowright" :color="'#C5CFD5'" size="24"></uni-icons>
				</view>
			</view>
			
			<view class="block1 yhk" @click="$goPage('../c2cCard/c2cCard?type=set1')">
				<view class="left">
					<view class="cny">
						CNY
					</view>
					<view class="two">
						<view class="aa">郑**</view>
						<view class="cc">625888888888888</view>
					</view>
				</view>
				<view class="right">
					<view><switch @click.stop="" @change="switch1Change" /></view>
					<view class="open">
						已开启
					</view>
				</view>
			</view>
			<view class="block1 zfb" @click="$goPage('../c2cCard/c2cCard?type=set2')">
				<view class="left">
					<view class="cny">
						CNY
					</view>
					<view class="two">
						<view class="aa">郑**</view>
						<view class="cc">625888888888888</view>
					</view>
				</view>
				<view class="right">
					<view><switch @click.stop="" @change="switch2Change" /></view>
					<view class="open">
						已开启
					</view>
				</view>
			</view>
			<view class="block1 wx" @click="$goPage('../c2cCard/c2cCard?type=set3')">
				<view class="left">
					<view class="cny">
						CNY
					</view>
					<view class="two">
						<view class="aa">郑**</view>
						<view class="cc">625888888888888</view>
					</view>
				</view>
				<view class="right">
					<view><switch @click.stop="" @change="switch3Change" /></view>
					<view class="open">
						已开启
					</view>
				</view>
			</view>
		</view>
		<!-- 修改银行卡设置 -->
		<Modal v-if="isShow" @close="closeModal()"></Modal>
		<!-- 个人中心 -->
		<!-- 遮罩 -->
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="isCenter" @click="onTap" />
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="isCenter" @click="onTap">
			<Pay></Pay>
		</uni-transition>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import Modal from '@/components/ok-modal/index.vue';
import uniTransition from "@/components/uni-transition/uni-transition.vue"
import Pay from '@/components/pay-modal/index.vue';
export default {
	components: { uniIcons, Modal, uniTransition, Pay },
	data() {
		return {
			isShow: false,
			isCenter: false,
			modeClass: ['slide-right'],
			maskClass: {
				'position': 'fixed',
				'bottom': 0,
				'top': 0,
				'left': 0,
				'right': 0,
				'z-index': '9998',
				'background-color': 'rgba(0, 0, 0, 0.4)'
			},
			transfromClass: {
				'position': 'fixed',
				'z-index': '9999',
				'bottom': 0,
				'top': 0,
				'left': 0,
				'right': 0,
				/* #ifndef APP-NVUE */
				'display': 'flex',
				/* #endif */
				'justify-content': 'center',
				'align-items': 'center'
			},
		};
	},
	computed: {},
	onShow() {},
	onNavigationBarButtonTap(e) {
		this.isCenter = true
	},
	methods: {
		closeModal() {
			this.isShow = false;
		},
		onTap() {
			this.isCenter = false;
		},
		switch1Change: function(e) {
			if(e.target.value) {
				this.isShow = true;
			}
			return true;
		},
		switch2Change: function(e) {
			if(e.target.value) {
				this.isShow = true;
			}
		},
		switch3Change: function(e) {
			if(e.target.value) {
				this.isShow = true;
			}
		}
	}
};
</script>

<style lang="scss">
@import './style.scss';
</style>
